<template>
	<el-popover placement="bottom-end" width="500" trigger="click" v-model="visible" popper-class="select_icon_wrapper">
		<div class="select_icon_button" slot="reference">
			<i :class="selectedIcon"></i>
			<el-button type="text">选择菜单图标</el-button>
		</div>
		<div class="select_icon_list">
			<el-row :gutter="6" v-if="elementIcons.length > 0">
				<el-col :span="2" v-for="(item, index) in elementIcons" :key="index">
					<span :class="item.font_class" :title="item.name" @click="handleSelectIcon(item.font_class)"></span>
				</el-col>
			</el-row>
			<div class="empty" v-else>暂无可选图标</div>
		</div>
	</el-popover>
</template>

<script>
import { color } from 'echarts';
const jsonData = require('@/assets/font/iconfont.json');
export default {
	props: {
		value: String
	},
	data() {
		return {
			visible: false,
			selectedIcon: this.value
		};
	},
	computed: {
		elementIcons() {
			console.log(jsonData);
			return jsonData.glyphs.map((item) => {
				return { ...item, font_class: `${jsonData.css_prefix_text}${item.font_class}` };
			});
		}
	},
	watch: {
		value(val) {
			this.selectedIcon = val;
		},
		selectedIcon(val) {
			this.$emit('input', val);
		}
	},
	methods: {
		handleSelectIcon(icon) {
			this.visible = false;
			this.selectedIcon = icon;
		}
	}
};
</script>

<style lang="scss" scoped>
.select_icon_button {
	display: inline-block;
	i {
		float: left;
		width: 34px;
		height: 34px;
		font-size: 24px;
		line-height: 34px;
		text-align: center;
		border: solid 1px #ccc;
	}
	.el-button {
		color: #606266;
		padding: 10px;
	}
}
.select_icon_list {
	max-height: 300px;
	padding: 10px 10px 0;
	overflow-y: auto;
	.el-col {
		margin-bottom: 6px;
		span {
			display: block;
			padding: 5px;
			line-height: 1;
			font-size: 20px;
			border-radius: 5px;
			border: solid 1px #ccc;
			cursor: pointer;
			color: #606266;
		}
	}
	.empty {
		text-align: center;
		padding: 5px 0 15px;
	}
}
</style>
<style>
.select_icon_wrapper {
	padding: 0;
}
</style>
